<template>
  <section>
    <div style="width:100%;height:100%;" :id="idName"></div>
  </section>
</template>

<script>
//  import echarts from 'echarts';
//	import {echarts} from "@/assets/js/echarts.min.js"/*修改源码，因为echarts有一个bug*/
export default {
  props: {
    option: Object,
    idName: "",
    resize: {
      type: Object,
      default: function() {
        return {
          height: 800
        };
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    //      	console.log(this.$echarts);
    this.$nextTick(() => {
      var dataSourcePie = this.$echarts.init(
        document.getElementById(this.idName)
      );
      dataSourcePie.setOption(this.option);
      dataSourcePie.resize(this.resize);
      //	            dataSourcePie.addEventListener('resize', function () {
      //	                dataSourcePie.resize();
      //	            });
      dataSourcePie.on("click", this.cevent); /*左键*/
      dataSourcePie.on("contextmenu", this.contextmenu); /*右键*/
      dataSourcePie.on("mouseup", params => {
        /*拖拽固定*/
        let option = dataSourcePie.getOption();
        //	          		  console.log(params)
        //	          		  console.log(option.series[0].data[params.dataIndex]);
        if (params.dataType === "node" && params.event.event.button === 0) {
          /*节点且左键才固定*/
          //	          		 	console.log("已经固定")
          //				          option.series[0].data[params.dataIndex].x = params.event.offsetX;
          //				          option.series[0].data[params.dataIndex].y = params.event.offsetY;
          //				          option.series[0].data[params.dataIndex].fixed = true;
          //				          dataSourcePie.setOption(option);
        }
        if (
          params.dataType === "node" &&
          option.series[0].data[params.dataIndex].fixed
        ) {
          /*节点且已经固定了的，可以再固定*/
          //	          		 	console.log("已经固定")
          //				          option.series[0].data[params.dataIndex].x = params.event.offsetX;
          //				          option.series[0].data[params.dataIndex].y = params.event.offsetY;
          //				          option.series[0].data[params.dataIndex].fixed = true;
          //				          dataSourcePie.setOption(option);
        }
      });
    });
  },
  methods: {
    cevent(param) {
      this.$emit("clickEcharts", param);
    },
    contextmenu(param) {
      document.oncontextmenu = function() {
        return false;
      };
      //	    		alert("右键")
      //				console.log(param);
      this.$emit("contextmenu", param);
    }
  },
  watch: {
    option: {
      /*深度检测这个对象的变化*/
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          var dataSourcePie = this.$echarts.init(
            document.getElementById(this.idName)
          );
          dataSourcePie.setOption(newVal);
          //				            window.addEventListener('resize', function () {
          //				                dataSourcePie.resize();
          //				            });
          dataSourcePie.on("click", this.cevent);
          dataSourcePie.on("contextmenu", this.contextmenu);
        });
      },
      deep: true
    }
  }
};
</script>

<style scoped="scoped">
</style>